<template>
  <div class="app-chip-quicksearch">
    <v-sheet>
      <v-chip-group
        active-class="cyan lighten-2 white--text"
        mandatory
        v-model="groupVal"
      >
        <v-chip
          v-if="favoriteVisiable"
          :link="false"
          active-class="orange lighten-1 white--text"
          @click="isSelectedItem(favorite) ? '':handleClick(favorite)"
          :value="favorite.id"
        >
          <i v-if="groupVal!=favorite.id" class="fa fa-star-o fa-1x"></i>
          <i v-else class="fa fa-star fa-1x"></i>
        </v-chip>
        <v-chip
          :link="false"
          v-for="item in renderArray"
          :key="item.id"
          :value="item.id"
          @click="isSelectedItem(item) ? '':handleClick(item)"
        >
          {{ item.label }}
        </v-chip>
      </v-chip-group>
    </v-sheet>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import "./app-chip-quickgroup.less";

@Component({})
export default class AppChipQuickSearch extends Vue {
  /**
   * 传入渲染项
   *
   * @type {Array<any>}
   * @memberof AppChipQuickSearch
   */
  @Prop() public items!: Array<any>;

  /**
   * 计数器服务名
   *
   * @type {string}
   * @memberof AppChipQuickSearch
   */
  @Prop() public counterService?: any;

  /**
   * 是否显示收藏夹
   * 
   * @type {boolean}
   * @memberof AppChipQuickSearch
   */
  @Prop() public favoriteVisiable!: boolean;

  /**
   * 选中项
   *
   * @type {*}
   * @memberof AppChipQuickSearch
   */
  public selectedUiItem: any;

  /**
   * 收藏按钮对象
   *
   * @type {*}
   * @memberof AppChipQuickSearch
   */
  public favorite: any = {
    codename: "favorite",
    disabled: false,
    id: "favorite",
    value: "favorite",
  };

  /**
   * 组绑定值
   *
   * @type {string}
   * @memberof AppChipQuickSearch
   */
  public groupVal: string = '';

  /**
   * 传入渲染项
   *
   * @type {Array<any>}
   * @memberof AppChipQuickSearch
   */
  get renderArray() {
    if (this.items && this.items.length > 0) {
      this.handleClick(this.items[0]);
      return this.handleDataSet(this.items);
    } else {
      return [];
    }
  }

  /**
   * 是否选中当前项
   *
   * @param item 传入当前项
   * @memberof AppChipQuickSearch
   */
  public isSelectedItem(item: any) {
    if (this.selectedUiItem && this.selectedUiItem.id === item.id) {
      return true;
    } else {
      return false;
    }
  }

  /**
   * 处理代码表返回数据(树状结构)
   *
   * @param result 返回数组
   * @memberof AppChipQuickSearch
   */
  public handleDataSet(result: Array<any>) {
    let list: Array<any> = [];
    if (result.length === 0) {
      return list;
    }
    result.forEach((codeItem: any) => {
      if (!codeItem.pvalue) {
        let valueField: string = codeItem.value;
        list.push(codeItem);
      }
    });
    return list;
  }

  /**
   * 处理点击事件
   *
   * @param $event 值
   * @param isswitch 是否切换UI选中项
   * @memberof AppChipQuickSearch
   */
  public handleClick($event: any, isswitch: boolean = true) {
    if (this.selectedUiItem && this.selectedUiItem.id === $event.id) {
      return;
    }
    this.groupVal = $event.id;
    this.$emit("valuechange", $event);
    if (isswitch) {
      this.selectedUiItem = $event;
    }
  }
}
</script>
